<template>
	<div class="advanced_models_wrapper">
		<div class="headbox"><h2>先进典型</h2></div>
		<el-row class="listbox" :gutter="40">
			<el-col :span="12" v-for="(item, index) in listDatas" :key="index">
				<dl>
					<dt><img :src="item.httpUrl" alt="" /></dt>
					<dd>
						<h4>{{ item.title }}</h4>
						<span>{{ item.subTitle }}</span>
						<p>{{ item.outline }}</p>
						<el-button size="small" plain @click="handleLookDetail(item.id)">
							查看详情
							<i class="el-icon-arrow-right"></i>
						</el-button>
					</dd>
				</dl>
			</el-col>
		</el-row>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据"></sw-pagination>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			listDatas: []
		};
	},
	computed: {
		routerPath() {
			return this.$route.path;
		}
	},
	mounted() {
		this.getNewsListData();
	},
	methods: {
		...mapActions(['getNewsData']),
		//获取文件机关动态数据
		getNewsListData() {
			this.getNewsData({ ...this.listQuery, classifyId: '210' }).then(res => {
				this.dataCount = parseInt(res.count);
				this.listDatas = !res.data ? [] : res.data;
			});
		},

		//查看详情
		handleLookDetail(id) {
			this.$router.push({
				path: '/model/' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.advanced_models_wrapper {
	padding-bottom: 64px;
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.listbox {
		margin-top: 24px;
		.el-col {
			margin-bottom: 40px;
		}
		dl {
			display: flex;
			padding: 24px;
			border: solid 1px #ebedee;
			&:hover {
				box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
			}
		}
		dt {
			width: 192px;
			height: 256px;
			flex-shrink: 0;
			margin-right: 24px;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		dd {
			flex: 1;
			overflow: hidden;
		}
		h4 {
			font-size: 18px;
			height: 20px;
			line-height: 20px;
			margin-bottom: 10px;
		}
		span {
			display: block;
			color: rgba(0, 0, 0, 0.56);
		}
		p {
			display: -webkit-box;
			line-height: 24px;
			margin-top: 20px;
			height: 144px;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 6;
			-webkit-line-clamp: 6;
			color: rgba(0, 0, 0, 0.4);
		}
		.el-button--small {
			float: right;
			margin-top: 10px;
			&:focus,
			&:hover {
				color: #357c65;
				border-color: #357c65;
			}
		}
		.el-icon-arrow-right {
			font-weight: bold;
			color: #357c65;
		}
	}
}
</style>
